<!DOCTYPE html>
<html>
<!--
   This is a jQuery Tools standalone demo. Feel free to copy/paste.
   http://flowplayer.org/tools/demos/

   Do *not* reference CSS files and images from flowplayer.org when in
   production Enjoy!
-->
<head>
  <title>jQuery Tools standalone demo</title>

<!-- include the Tools -->

<script src="js/jq.tabs.js"></script>

  <!-- standalone page styling (can be removed) -->

</head>
<body>

<div id="accordion">
  <h5 class="current"><span></span>First pane</h5>

  <div class="pane" style="display:block">
      First pane 1<br/>
      First pane 1<br/>
      First pane 1<br/>
      First pane 1<br/>
      First pane 1<br/>
      First pane 1<br/>
      First pane 1<br/>
      First pane 1<br/>


  </div>

  <h5><span></span>Second pane</h5>

  <div class="pane">

      Second pane 2 <br/>
      Second pane 2 <br/>
      Second pane 2 <br/>
      Second pane 2 <br/>
      Second pane 2 <br/>
      Second pane 2 <br/>
      Second pane 2 <br/>

  </div>

  <h5><span></span>Third pane</h5>

  <div class="pane">

      Third pane 3<br/>
      Third pane 3<br/>
      Third pane 3<br/>
      Third pane 3<br/>
      Third pane 3<br/>
      Third pane 3<br/>
      Third pane 3<br/>
  </div>
</div>


<h2>ajax：</h2>
<div id="accordion_ajax">
    <a class="current" href="ddd.html"><h5><span></span>First pane</h5></a>

    <div class="pane" style="display:block">



    </div>

    <a><h5><span></span>Second </h5></a>

    <div class="pane">


    </div>

    <a><h5><span></span>Third pane</h5></a>

    <div class="pane">


    </div>
</div>

<!-- activate tabs with JavaScript -->
<script>
    $(function() {


         $("#accordion").tabs("div.pane",
         {tabs: 'h5', initialIndex: null}
         );

         $("#accordion_ajax").tabs("div.pane",
         {tabs: 'a', initialIndex: null,effect:'ajax'}
         );



    });
</script>

</body>
</html>